 <!-- 素材库图片 -->
 <style>
.text_library{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: #f0f3f5;
    z-index: 11;
    overflow-y: scroll;
}
.ul_img li{
    float:left;
    width:24%;
    height:70px;
    padding-left:1%;
    position:relative;
}

.ul_img li input{
    position:absolute;
    top:0px;
    right:0px;
    width:20px;
    height:20px;
}

.ul_img li img{
    float:left;
    width:100%;
    height:100%;
}

/*.yulan{
    position:fixed;
    top:25%;
    left:5%;
    width:90%;
    height:150px;
}*/

 </style>

<div class="text_library" style="display: none;">
    <div class="tmusic_top">
        <div class="header tmusic_header">
            选择素材
            <a href="javascript:;" class="back" style="padding-top: 7px;">
                <img src="__PUBLIC__/img/back.png">
                <span class="back_cs">
                    关闭
                </span>
            </a>
            <a readonly="true" href="javascript:void(0)" class="head_alter article_save tmusic_footer">
                 保存
            </a>
        </div>
    </div>
    <div class="tmusic_body" id="tmusic_body">
        <div class="tlibrary_body_table" style="overflow-y:auto;">
            <table cellspacing="0"cellpadding="0" class="table">
                <tbody class="music_list" style="text-align:center">
                    <volist name="adList" key="k" id="vo">
                        <tr>
                           <div style="width:100%;height:80px;margin-top:15px;padding-right:15px">
                       
                            <ul class="ul_img">
                                    <volist name="vo" id="voo">
                                    <li><img src="<{$voo['thumb']}>"><input name="img_id" type="radio" value="<{$voo['id']}>" <if condition="$voo['id'] eq $ad['img_id']">checked="checked"</if>></li>
                                    </volist>
                             
                            </ul>

                           </div>

                        </tr>
                    </volist>
                    				 
                </tbody>
                <div id="loadding"></div>                 
                 <input type="hidden" id="page" value="1">
            </table>
        </div>

        <!-- 预览图 -->
       <!--  <div class="yulan" style="display:none"><img src="" style="width:100%;height:100%"></div> -->

    </div>
    <!-- <div class="header tmusic_footer">
        确定
    </div> -->
</div>
<script>
$(".tmusic_footer").click(function(){
    $(".text_library").hide();
    $(".img_div").hide();
    $("#library").val($("input[name='img_id']:checked").val());
    $("#upload").val($("input[name='img_id']:checked").parent().find("img").attr('src'));
    $("#show_img").attr('src',$("input[name='img_id']:checked").parent().find("img").attr('src'));
})

$(".back_cs").click(function(){
    $(".text_library").hide();
    $(".img_div").hide();
})

$(".ul_img img").click(function(){
    var src = $(this).attr('src');

    layer.open({
        type: 1,
        content: '<div class="yulan" style="width:100%;height:100%"><img src="'+src+'" style="width:100%;height:auto"></div>',
        // style: 'width:60%; height:60%; border:none;'
    });

   //$(".yulan img").attr('src',src);
   // $(".yulan").show();
})

$(".yulan").click(function(){
    $(this).hide();
});

$(".text_library").scroll(function () {
    if($(this).scrollTop()>=($(".tlibrary_body_table").height()+100-$(this).height())){

        ajax_library();
    }
});

//加载模板
function ajax_library(){
    // alert('ajax_template '+$('#page').val());
    //var loadObj = $('#loadding');
    var page = $('#page').val();
    if(page == '-1'){
        return false;
    }
   // loadObj.show();
    $.ajax({
        type: "POST",
        url: "<{:U('library')}>",
        data: "page="+page,
        dataType:'json',
        success: function(msg){
            var img_id = "<{$ad['img_id']}>";
            if(msg.status == '1'){
                var html = '';

                for(i in msg.data){
                    html += '<div style="width:100%;height:80px;margin-top:15px;padding-right:15px"><ul class="ul_img">';

                    for(y in msg.data[i]){ 
                        html += '<li><img src="'+msg.data[i][y].img_path+'"><input style="width:20px;height:20px" name="img_id" type="radio" value="'+msg.data[i][y].id+'"';
                        if(msg.data[i][y].id == img_id){
                           html += ' checked="checked"/>';
                        }
                        html +='</li>';
                    }

                    html += '</ul></div>';
                }

                page = parseInt(page) + 1;

                $('#page').val(page);
                $('#loadding').before(html);
                loadObj.hide();
            }else{
                $('#page').val('-1');
               loadObj.hide();
            }
        }
    });
}
</script>